<template>
  <a-form layout='vertical' :form="form">
    <a-form-item  class="a-form-item" v-bind="formItemLayout" label="备选图导出本地的路径">
      <a-input
        v-decorator="[
          'chartFindingSavePath',
          {
            rules: [{ required: true, message: '请输入备选图导出本地的路径!' }],
          }
        ]"
        placeholder="请输入备选图导出本地的路径"
      />
    </a-form-item>
    <a-form-item  class="a-form-item" v-bind="formItemLayout" label="每天搜图免费次数">
      <a-input-number
        v-decorator="[
          'searchImageGratisTimes',
          {
            rules: [{ required: true, message: '请输入每天搜图免费次数!' }],
          }
        ]"
        :min="1"
        :max="1000000"
      />
    </a-form-item>
    <a-form-item  class="a-form-item" v-bind="formItemLayout" label="搜图每次收费">
      <a-input-number
        v-decorator="[
          'searchFeePerTime',
          {
            rules: [{ required: true, message: '请输入搜图每次收费!' }],
          }
        ]"
        :min="0"
        :max="1000"
        :precision="2"
      />
    </a-form-item>
    <a-form-item  class="a-form-item" v-bind="formItemLayout" label="图库列表每月免费页数">
      <a-input-number
        v-decorator="[
          'imageStoreListGratisTimes',
          {
            rules: [{ required: true, message: '请输入图库列表每月免费页数!' }],
          }
        ]"
        :min="1"
        :max="1000000"
      />
    </a-form-item>
    <a-form-item  class="a-form-item" v-bind="formItemLayout" label="图库列表每页收费">
      <a-input-number
        v-decorator="[
          'imageStoreListFeePerTime',
          {
            rules: [{ required: true, message: '请输入图库列表每页收费!' }],
          }
        ]"
        :min="0"
        :max="1000"
        :precision="2"
      />
    </a-form-item>
    <a-form-item>
      <a-input type="hidden" v-decorator="['id', {}]"/>
    </a-form-item>
    <a-form-item>
      <a-button @click="handleOk" v-if="hasAuthority(['*', 'settings-edit'])">保存</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import Vue from 'vue'
import serv from './SettingsService'
import { Form, Input, InputNumber, Button } from 'ant-design-vue'
Vue.component(Form.name, Form)
Vue.component(Form.Item.name, Form.Item)
Vue.component(Input.name, Input)
Vue.component(InputNumber.name, InputNumber)
Vue.component(Button.name, Button)
export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  async created () {
    this.Settings = await serv.getSettings()
    console.log(this.Settings)
    this.form.setFieldsValue(this.Settings)
  },
  data () {
    return {
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      bodyStyle: { height: 400 },
      loading: false
    }
  },
  methods: {
    handleOk () {
      const form = this.form
      form.validateFields((err, values) => {
        if (err) {
          return
        }

        // let formData = new FormData()
        // for (let key in values) {
        //   let value = values[key]
        //   if (value) formData.append(key, value.file ? value.file : encodeURI(value))
        // }
        this.confirmLoading = true
        serv.save(values).then(res => {
          this.confirmLoading = false
          if (res.data.code === 0) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    }
  }
}
</script>

<style scoped>
img {
  max-width: 100%;
}

.a-form-item {
  margin-bottom: 0px;
}
</style>
